<template>
    <p class="g-name">2件装 粉釉花瓣心意点缀 点心盘*2 碟子盘子</p>
    <p class="g-desc">花瓣造型干净简约 多功能使用堆叠方便</p>
    <p class="g-price">
      <span>108.00</span>
      <span>199.00</span>
    </p>
    <div class="g-service">
        <!-- 自定义列表 -->
      <dl>
        <!-- .dt中一般是你的列表的表头 -->
        <dt>促销</dt>
        <!--  -->
        <dd>12月好物放送，App领券购买直降120元</dd>
      </dl>
      <dl>
        <dt>配送</dt>
        <dd>至 <XtxCity :fullLocation="fullLocation" @change="changResult"/></dd>
      </dl>
      <dl>
        <dt>服务</dt>
        <dd>
          <span>无忧退货</span>
          <span>快速退款</span>
          <span>免费包邮</span>
          <a href="javascript:;">了解详情</a>
        </dd>
      </dl>
    </div>
  </template>
  
  <script>
  import {ref} from 'vue'
  export default {
    name: 'GoodName',
    props: {
      goods: {
        type: Object,
        default: () => ({})
      }
    },
    setup (props) {
      //未登录：提供给后台的四项数据
       // 默认情况
    const provinceCode = ref('110000')
    const cityCode = ref('119900')
    const countyCode = ref('110101')
    const fullLocation = ref('北京市 市辖区 东城区')
    //已登录，有默认地址
      if(props.goods.userAddresses) {
        const addressesList = props.goods.userAddresses.find(item => item.isDefault === 1)
        if(addressesList) {
          provinceCode.value = addressesList.provinceCode
          cityCode.value = addressesList.cityCode
          countyCode.value = addressesList.countyCode
          fullLocation.value = addressesList.fullLocation
        }
      }
      const changResult = (result) => {
        provinceCode.value = result.provinceCode
        cityCode.value = result.cityCode
        countyCode.value = result.countyCode
        fullLocation.value = result.fullLocation
        
      }
      return {fullLocation, changResult}
    }
  }
  </script>
  
  <style lang="less" scoped>
  .g-name {
    font-size: 22px
  }
  .g-desc {
    color: #999;
    margin-top: 10px;
  }
  .g-price {
    margin-top: 10px;
    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }
      &:first-child {
        color: @priceColor;
        margin-right: 10px;
        font-size: 22px;
      }
      &:last-child {
        color: #999;
        text-decoration: line-through;
        font-size: 16px;
      }
    }
  }
  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;
    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      dt {
        width: 50px;
        color: #999;
      }
      dd {
        color: #666;
        &:last-child {
          span {
            margin-right: 10px;
            &::before {
              content: "•";
              color: @xtxColor;
              margin-right: 2px;
            }
          }
          a {
            color: @xtxColor;
          }
        }
      }
    }
  }
  </style>